<template>
  <div class="app-container" >

    <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="80px">
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="客户分类" prop="customerClassify">
            <el-select v-model="form.customerClassify" placeholder="请选择客户分类" class="w100" >
              <el-option
                v-for="dict in dict.type.zxcrm_customer_classify"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            <el-input v-model="form.companyName" placeholder="请输入公司名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="客户简称" prop="companyAbbreviation" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-input v-model="form.companyAbbreviation" placeholder="请输入公司简称" />
          </el-form-item>
          <el-form-item label="供应商简称" prop="supplierAbbreviation" v-if="form.customerClassify == 3 ">
            <el-input v-model="form.supplierAbbreviation" placeholder="请输入供应商简称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户等级" prop="customerLevel" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-select v-model="form.customerLevel" placeholder="请选择客户等级" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_customer_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商类型" prop="supplierType" v-if="form.customerClassify == 3">
            <el-select v-model="form.supplierType" placeholder="请选择供应商类型" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_supplier_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="经营地址" prop="operateAddress" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            <el-input v-model="form.operateAddress" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际控制人" prop="actualControllerId" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            <el-select v-model="form.actualControllerId" placeholder="请选择实际控制人" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="疫苗部门负责人" prop="vaccineDepartmentHeadId" v-if="form.customerClassify == 1">
            <el-select v-model="form.vaccineDepartmentHeadId" placeholder="请选择疫苗部门负责人" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购负责人" prop="purchaseHeadId" v-if="form.customerClassify == 2">
            <el-select v-model="form.purchaseHeadId" placeholder="请选择采购负责人" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购对接人" prop="purchaseDockingId" v-if="form.customerClassify == 1 || form.customerClassify == 2 ">
            <el-select v-model="form.purchaseDockingId" placeholder="请选择采购对接人" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="财务" prop="financeId" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            <el-select v-model="form.financeId" placeholder="请选择财务" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属地区" prop="area" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-input v-model="form.area" placeholder="请输入所属地区" />
          </el-form-item>
          <el-form-item label="供应商来源" prop="supplierSource " v-if="form.customerClassify == 3">
            <el-select v-model="form.supplierSource" placeholder="请选择供应商来源" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_supplier_source"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="客户类型" prop="customerType" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-select v-model="form.customerType" placeholder="请选择客户类型" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_customer_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商状态" prop="supplierStatus" v-if="form.customerClassify == 3">
            <el-select v-model="form.supplierStatus" placeholder="请选择供应商状态" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_supplier_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主销产品(疫苗)" prop="mainSalesProductVaccine" v-if="form.customerClassify == 1 ">
            <el-select v-model="mainSalesProduct" multiple placeholder="请选择主销产品" @change="handleMainSalesProduct" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_main_sales_product"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主销产品" prop="mainSalesProduct" v-if=" form.customerClassify == 2 || form.customerClassify == 3">
             <el-input v-model="form.mainSalesProduct" type="textarea" placeholder="请输入主销产品" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="库管" prop="warehouseOperatorId" v-if="form.customerClassify == 1">
            <el-select v-model="form.warehouseOperatorId" placeholder="请选择库管" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用者" prop="userId" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-select v-model="form.userId" placeholder="请选择使用者" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="24">
          <el-form-item label="竞品" prop="competitor" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            <editor v-model="form.competitor" :min-height="192"  />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="客户关系" prop="customerReloationship" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-select v-model="form.customerReloationship" placeholder="请选择客户关系" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_customer_relationship"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户内部组织关系" prop="customerOrganizationalRelationship" v-if="form.customerClassify == 1 || form.customerClassify == 2">
            <el-input v-model="form.customerOrganizationalRelationship" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="客户状态" prop="customerStatus" v-if="form.customerClassify == 2">
            <el-select v-model="form.customerStatus" placeholder="请选择客户状态" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_customer_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户来源" prop="customerSource" v-if="form.customerClassify == 2">
            <el-select v-model="form.customerSource" placeholder="请选择客户来源" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_customer_source"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="客户成交卡点分析" prop="customerTransationAnalysis" v-if="form.customerClassify == 2">
            <el-input v-model="form.customerTransationAnalysis" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="供应商政策支持" prop="supplierPolicySupport" v-if="form.customerClassify == 3">
            <el-input v-model="form.supplierPolicySupport" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特殊要求或条件" prop="specialRequirement" v-if="form.customerClassify == 2 || form.customerClassify == 3">
            <el-input v-model="form.specialRequirement" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="回款周期" prop="paymentCycle" v-if="form.customerClassify == 2">
            <el-select v-model="form.paymentCycle" placeholder="请选择回款周期" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_payment_cycle"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结算方式(药品)" prop="medicinePaymentMethod" v-if="form.customerClassify == 2">
            <el-select v-model="form.medicinePaymentMethod" placeholder="请选择结算方式(药品)" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_medicine_payment_method"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="销售对接人" prop="saleContactId" v-if="form.customerClassify == 3">
            <el-select v-model="form.saleContactId" placeholder="请选择销售对接人" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售负责人" prop="saleHeadId" v-if="form.customerClassify == 3">
            <el-select v-model="form.saleHeadId" placeholder="请选择销售负责人" class="w100" filterable>
              <el-option
                v-for="item in contactList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="flex-space-between">
                  <span>{{ item.name }}</span>
                  <span class="font-gray">{{ item.customerCompanyName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="供应商等级" prop="supplierLevel" v-if="form.customerClassify == 3">
            <el-select v-model="form.supplierLevel" placeholder="请选择供应商等级" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_supplier_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商内部组织关系" prop="supplierOrganizationalRelationship" v-if="form.customerClassify == 3">
            <el-input v-model="form.supplierOrganizationalRelationship" placeholder="请输入供应商内部组织关系" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="贷款周期" prop="loanCycle" v-if="form.customerClassify == 3">
            <el-input v-model="form.loanCycle" placeholder="请输入贷款周期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结算方式(供应商)" prop="supplierPaymentMethod" v-if="form.customerClassify == 3">
            <el-select v-model="form.supplierPaymentMethod" placeholder="请选择结算方式(供应商)" class="w100">
              <el-option
                v-for="dict in dict.type.zxcrm_supplier_payment_method"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="gutter">
        <el-col :span="12">
          <el-form-item label="其他" prop="other" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            <el-input v-model="form.other" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓储配送" prop="warehouseDelivery" v-if="form.customerClassify == 2 || form.customerClassify == 3">
            <el-input v-model="form.warehouseDelivery" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="接种量" prop="inoculationAmount" v-if="form.customerClassify == 1">
            <el-input v-model="form.inoculationAmount" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="flex-right">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
    </div>
  </div>
</template>

<script>
  import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/zxcrm/customer"
  export default{
    name:"contactUpdate",
    dicts: ['zxcrm_customer_classify', 'zxcrm_customer_level', 'zxcrm_supplier_status', 'zxcrm_payment_cycle', 'zxcrm_supplier_payment_method', 'zxcrm_customer_relationship', 'zxcrm_main_sales_product', 'zxcrm_medicine_payment_method', 'zxcrm_supplier_type', 'zxcrm_customer_status', 'zxcrm_customer_type', 'zxcrm_supplier_level', 'zxcrm_customer_source', 'zxcrm_supplier_source','	zxcrm_input_method'],
    props:{
      form:{
        default:{}
      },
      contactList:{
        default:[]
      },
    },
    data() {
      return{
        gutter:20,
        // 表单校验
        rules: {
            companyName: [
              { required: true, message: '公司名称是必填项', trigger: 'blur' }
            ],
            customerLevel: [
              { required: true, message: '客户等级是必填项', trigger: 'blur' }
            ],
            customerType: [
              { required: true, message: '客户类型是必填项', trigger: 'blur' }
            ],
        }
      }
    },
    created(){
      this.reset()
    },
    methods:{
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              this.$emit('updateCustomer',this.form)
              // updateCustomer(this.form).then(response => {
              //   this.$modal.msgSuccess("修改成功")
              // })
            } else {
               this.$emit('addCustomer',this.form)
              // addCustomer(this.form).then(response => {
              //   this.$modal.msgSuccess("新增成功")
              // })
            }
          }
        })
      },

      reset() {
        this.mainSalesProduct = []
        this.basicInfoForm = {
          id: null,
          companyName: null,
          companyAbbreviation: null,
          customerClassify: null,
          customerLevel: null,
          operateAddress: null,
          actualControllerId: null,
          vaccineDepartmentHeadId: null,
          purchaseDockingId: null,
          warehouseOperatorId: null,
          userId: null,
          financeId: null,
          area: null,
          customerType: null,
          competitor: null,
          mainSalesProduct: null,
          customerReloationship: null,
          customerOrganizationalRelationship: null,
          other: null,
          inoculationAmount: null,
          purchaseHeadId: null,
          customerStatus: null,
          customerSource: null,
          customerTransationAnalysis: null,
          specialRequirement: null,
          paymentCycle: null,
          medicinePaymentMethod: null,
          warehouseDelivery: null,
          supplierAbbreviation: null,
          saleHeadId: null,
          saleContactId: null,
          supplierStatus: null,
          supplierSource: null,
          supplierType: null,
          supplierLevel: null,
          supplierOrganizationalRelationship: null,
          supplierPolicySupport: null,
          loanCycle: null,
          supplierPaymentMethod: null,
          dealStatus: null,
          dealTime: null,
          nextContactTime: null,
          inputMethod: null,
          informationCompleteness: null,
          status: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        }
        this.resetForm("basicInfoForm")
      },
    }

  }
</script>

<style>
</style>
